import React, { Component } from 'react'
import { connect } from "react-redux"
import { bindActionCreators } from "redux"
import { Icon } from 'antd-mobile';

// 引css
import "./cate.css"
// 引actions以及导出的方法
import { actions, getCates, getGoods } from "../../store/modules/cate"
class Cate extends Component {
    render() {
        let { cates, goods, cate: { reqGetgoods,reqCartadd } } = this.props
        return (
            <div className="pad">
                <div className="cate_search clearfix">
                    <Icon type="search" className="fl" />
                    <input type="text" placeholder="按内容搜索" className="fl" />
                </div>
                <div className="cate_content1">
                    <ul className="side">
                        {
                            cates ? cates.map(item => (
                                <li key={item.id} onClick={() => reqGetgoods(item.id)}>{item.catename}</li>
                            )) : null
                        }
                    </ul>

                    <div className="cate_content2">
                        {
                            goods ? goods.map(item => (
                                <div className="clearfix" key={item.id}>
                                    <img src={item.img} alt="" className="fl" />
                                    <ul className="fr">
                                        <li>{item.goodsname}</li>
                                        <li>
                                            <span>￥{item.price}</span>
                                            <span>￥{item.market_price}</span><br/>
                                            <span>限购{item.islimit}份</span>
                                        </li>
                                        <li>
                                            {item.description}
                                        </li>
                                    </ul>
                                    <button onClick={()=>reqCartadd(item.id)}>加购</button>
                                </div>
                            )) : null
                        }

                    </div>
                </div>
            </div>
        )
    }
    componentDidMount() {
        let { reqGetcate, reqGetgoods } = this.props.cate
        reqGetcate()
        reqGetgoods(1)
    }
}

let mapStateToProps = (state) => ({
    cates: getCates(state),
    goods: getGoods(state),
});
let mapDispatchToProps = (dispatch) => ({
    cate: bindActionCreators(actions, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(Cate)
